<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/table/bootstrap-table.css">
    <link rel="stylesheet" href="../../css/table/bootstrap-editable.css">
    <title>popover</title>
</head>

<body>
    <div class="container">
        <h1>Editable</h1>
        <div id="toolbar">
            <button id="button" class="btn btn-default">getSelections(多选框选中内容)</button>
            <button id="button2" class="btn btn-default">load(重绘数据源)</button>
            <button id="button3" class="btn btn-default">append(追加内容)</button>
            <button id="button4" class="btn btn-default">prepend(追加内容）</button>
            <button id="button5" class="btn btn-default">remove(删除功能)</button>
            <button id="button6" class="btn btn-default">refresh(刷新)</button>
            <button id="button7" class="btn btn-default">prevPage</button>
            <button id="button8" class="btn btn-default">nextPage</button>
            <button id="button9" class="btn btn-default">Refresh from url</button>
            <input type="text" id="name" value="">
            <button id="button10" class="btn btn-default">查询</button>
        </div>
        <table id="table" data-toggle="table" data-pagination="true" data-page-size="3" 
            data-page-list="[3,10, 25, 50, 100, ALL]"
            data-pagination-first-text="第一页" data-pagination-pre-text="上一页" data-pagination-next-text="下一页" 
            data-pagination-last-text="最后一页"
            data-row-style="rowStyle" data-detail-view="true" data-detail-formatter="detailFormatter" data-click-to-select="true"
            data-side-pagination="server" data-url="/table/data">
            <thead>
                <tr>
                    <th data-field="state" data-checkbox="true" data-formatter="stateFormatter"></th>
                    <th data-field="id">ID</th>
                    <th data-field="name" data-halign="right" data-align="center" data-editable="true">
                        <i class="glyphicon glyphicon-star"></i>Item Name</th>
                    <th data-field="price" data-editable="true">
                        <i class="glyphicon glyphicon-heart"></i>Item Price</th>
                    <th data-field="operate" data-formatter="operateFormatter">Item Operate</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/table/bootstrap-table.js"></script>
    <script src="../../js/table/bootstrap-table-editable.js"></script>
    <script src="../../js/table/bootstrap-editable.js"></script>
    <script src="../../js/table/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {


        });
    </script>
</body>

</html>